<template>
  <view class="headSelect">
    <transition name="el-fade-in-linear">
      <view class="home_head_fixed" v-if="visible" @tap="close"></view>
    </transition>
    <transition name="el-zoom-in-top">
      <view class="home_head_select" v-if="visible">
        <view class="item flex a-center jlr" v-for="(item, index) in schools" @tap="select(item.id)">
          <view class="flex a-center">
            <view class="icon"><image class="img" :src="item.avatar" mode="widthFix" /></view>
            <view class="label">{{ item.name }}</view>
            <view class="job">（老师）</view>
          </view>
          <i class="iconfont icon-dui1" v-if="id == item.id"></i>
        </view>
      </view>
    </transition>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      require: true
    },
    id: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  methods: {
    select(v) {
      this.$emit('select', v);
    },

    close() {
      this.$emit('update:visible', false);
    }

  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.home_head_fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 98;
}
.home_head_select {
  background-color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  top: calc(44px + var(--status-bar-height));
  z-index: 99;
  padding: 20rpx 50rpx;
  border-top: 1px solid #eee;
  .item {
    padding: 0.1rem 0;
    position: relative;
    .icon,
    .icon image {
      width: 64rpx !important;
      height: 64rpx !important;
    }
    .label {
      font-size: 30rpx;
      color: #303133;
      margin-left: 30rpx;
      margin-right: 10rpx;
    }
    .img {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }
    .job {
      font-size: 24rpx;
      color: #606265;
    }
    i {
      font-size: 34rpx;
      color: #2979ff;
    }
  }
}
</style>
